<template>
	<view class="my-userinfo-container">
		<!-- 头像和昵称区域 -->
		<view class="top-box">
			<!-- <image :src="userinfo.avatarUrl" class="avatar"></image>
			<view class="nickname">{{userinfo.nickName}}</view> -->
		</view>
		
		<view class="body">
			<view class="person-info" @click="gotoPerson">
				<view class="inner-item">
					<uni-icons type="person" size="15"></uni-icons>
					<text>个人资料</text>
				</view>
				<uni-icons type="arrowright" size="15"></uni-icons>
			</view>
			<view class="person-visit" @click="gotoVisitInfo">
				<view class="inner-item">
					<uni-icons type="flag" size="15"></uni-icons>
					<text>参观预约</text>
				</view>
				<uni-icons type="arrowright" size="15"></uni-icons>
			</view>
			<!-- <view class="activity">
				<view class="inner-item">
					<uni-icons type="map" size="15"></uni-icons>
					<text>活动预约</text>
				</view>
				<uni-icons type="arrowright" size="15"></uni-icons>
			</view> -->
			<view class="my-like" @click="gotoMyLikeExhibit">
				<view class="inner-item">
					<uni-icons type="star-filled" size="15"></uni-icons>
					<text>我的喜爱</text>
				</view>
				<uni-icons type="arrowright" size="15"></uni-icons>
			</view>
		</view>
		
	</view>
</template>

<script>
	// import { mapState, mapMutations } from 'vuex'
	export default {
		data() {
			return {
				
			};
		},
		computed: {
			// ...mapState('m_user', ['userinfo'])
		},
		methods: {
			// ...mapMutations('m_user', ['updateAddress', 'updateUserInfo', 'updateToken']),
			// async logout() {
			// 	const [err, succ] = await uni.showModal({
			// 		title: "提示",
			// 		content: "您确认退出登录吗？"
			// 	}).catch(err => err)
				
			// 	if(succ && succ.confirm) {
			// 		this.updateAddress({})
			// 		this.updateUserInfo({})
			// 		this.updateToken('')
			// 	}
			// },
			//跳转到个人资料详情页
			gotoPerson() {
				uni.navigateTo({
					url: '/subpkg/person/person' 
					
				})
			},
			//跳转到个人预约
			gotoVisitInfo() {
				uni.navigateTo({
					url: '/subpkg/visitInfo/visitInfo'
				})
			},
			//跳转我的点赞文物
			gotoMyLikeExhibit() {
				uni.navigateTo({
					url: '../../subpkg/myLickRelicDetail/myLickRelicDetail'
				})
			}
		}
	}
</script>

<style lang="scss">
.my-userinfo-container {
	height: 100%;
	// background-color: #F4F4F4;

	.top-box {
		height: 400rpx;
		// background-color: #C00000;
		background-image: url("http://8.138.83.48:9000/library/museum/museum.jpg");
		background-size: cover;
		// opacity: 0.8;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-direction: column;
		
		// .avatar {
		// 	height: 90px;
		// 	width: 90px;
		// 	border-radius: 45px;
		// 	border: 2px solid #FFF;
		// 	box-shadow: 0 1px 5px black;
		// 	opacity: 0.8;
		// }
		// .nickname {
		// 	font-size: 16px;
		// 	// color: #FFF;
		// 	font-weight: bold;
		// 	margin-top: 10px;
		// }
	}
	
	.body {
		.inner-item {
			width: 90px;
			display: flex;
			justify-content: space-between;
		}
		.person-info {
			height: 60px;
			line-height: 60px;
			display: flex;
			justify-content: space-between;
			font-size: 18px;
			background-color: #ffda963b;
			padding: 0 10px;
			// border-top: 1px solid #f4d246;
			border-bottom: 1px solid #f4d246;
		}
		
		.person-visit {
			height: 60px;
			line-height: 60px;
			display: flex;
			justify-content: space-between;
			font-size: 18px;
			padding: 0 10px ;
			background-color: #ffda963b;
			border-bottom: 1px solid #f4d246;
		}
		// .activity {
		// 	height: 60px;
		// 	line-height: 60px;
		// 	display: flex;
		// 	justify-content: space-between;
		// 	font-size: 18px;
		// 	margin: 0 10px ;
		// }
		.my-like {
			height: 60px;
			line-height: 60px;
			display: flex;
			justify-content: space-between;
			font-size: 18px;
			padding: 0 10px ;
			background-color: #ffda963b;
			border-bottom: 1px solid #f4d246;
		}
		
	}
}



</style>
